<template>
  <el-menu
    :default-active="defaultIndex"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#304156"
    text-color="#fff"
    :unique-opened="true"
    :router="true"
  >
    <el-menu-item index="/index">
      <el-icon>
        <document />
      </el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-sub-menu v-for="item in arr" :index="String(item.id)">
      <template #title>
        <el-icon>
          <location />
        </el-icon>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item
        v-for="aitem in item.list"
        :index="'/' + item.name + '/' + aitem.name"
        >{{ aitem.title }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { useUserStore } from "@/store/modules/user";
import { useRoute } from "vue-router";
const route = useRoute();
const defaultIndex = ref(route.path);

const useStore = useUserStore();
const props = defineProps({
  isCollapse: Boolean,
});
const arr = computed(() => useStore.getMenusConf);
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /* min-height: 400px; */
}
</style>
